<template>
  <div class="chatcontainer">
    <!-- 未登录状态 -->
    <div
      v-if="rowitem.status == 2"
      class="w_full h_full flexcolumn aligncenter justifycenter emptybox"
    >
      <img src="@/assets/images/empty1.png" alt="" class="emptyimg mb-20" />
      <div class="f-14 c_text3">请先登录企微号</div>
      <el-button type="primary" plain class="mt-20 f-14">登录</el-button>
    </div>
    <!-- 登录状态 -->
    <div v-else class="flex h_full">
      <div class="chatside bg_fff p_relative flexcolumn">
        <chatleft-header />
        <div class="chatlist">
          <div
            v-for="(item, index) in chatList"
            :key="index"
            class="chat-item p-12 w_full flex commhover"
            :class="{active:selectItem&&selectItem.wxid == item.wxid}"
            @click="handleChateItem(item)"
          >
            <el-badge :value="12">
              <img :src="item.avatar" alt="" class="avatarbox" />
            </el-badge>
            <div class="chatinfo">
              <div v-if="item.corp_name" class="textover f-14 c_000">
                <span class="elipisis textover">{{ item.nickname }}</span>
                <span class="elipisis textover pl-5 c_f90"
                  >@{{ item.corp_name }}</span
                >
              </div>
              <div v-else class="textover f-14 c_000">{{ item.nickname }}</div>
              <div class="textover f-12 mt-2 c_888999">你：冲冲冲</div>
            </div>
            <div class="chatdate">
              <div class="f-12 c_text3 mb-3">11:35</div>
              <el-dropdown>
                <svg-icon class-name="f-14 imore c_text3" icon-class="imore2" />
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>置顶</el-dropdown-item>
                  <el-dropdown-item>标为未读</el-dropdown-item>
                  <el-dropdown-item>消息免打扰</el-dropdown-item>
                  <el-dropdown-item>结束对话</el-dropdown-item>
                  <el-dropdown-item>屏蔽</el-dropdown-item>
                  <el-dropdown-item>退出群聊</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
        <div class="chatbottom flex f-14">
          <div class="cb_item flexcenter c_text2 f-14 border-r commhover">
            <i class="el-icon-check f-16 mr-3"></i>全部已读
          </div>
          <div class="cb_item flexcenter c_text2 f-14 commhover">
            <i class="el-icon-delete f-16 mr-3"></i>清空所有
          </div>
        </div>
      </div>
      <div class="chatwindow">
        <chat-window :key="chatkey" :userItem='rowitem' :friendItem='selectItem' />
      </div>
      <div class="chatright bg_fff">
        <chat-right />
      </div>
    </div>
  </div>
</template>
<script>
import ChatRight from './ChatRight.vue';
import ChatleftHeader from "./components/ChatleftHeader.vue";
import ChatWindow from './ChatWindow.vue'
export default {
  data() {
    return {
      selectItem:null,
      chatList: [
        {
          wxid: "R:10814949724396927",
          nickname: "测试群",
          avatar:
            "//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/5922867c1cbd03953b39d60d0ece5f33.png",
          corp_name: "",
        },
        {
          wxid: "1688855537489444",
          nickname: "肖洁",
          avatar:
            "//wework.qpic.cn/wwpic3az/646139_qhEaA8U0R8ya8Uz_1702871041/0",
          corp_name: "志新",
        },
      ],
      chatkey:''
    };
  },
  components: {
    ChatleftHeader,
    ChatRight,
    ChatWindow
  },
  created() {
    console.log("rowitem:", this.rowitem);
    this.getList();
  },
  props: {
    rowitem: {
      type: Object,
      default: {},
    },
  },
  methods: {
    getList() {
      console.log("获取内容");
    },

    handleChateItem(item){
      this.selectItem = item
      this.chatkey = Date.now()
    }
  },
};
</script>
<style lang="scss" scoped>
.chatcontainer {
  width: calc(100vw - 260px);
  height: 100%;
}
.emptyimg {
  width: 90px;
  height: 90px;
}
.emptybox {
  margin-top: -50px;
}
.chatside {
  width: 280px;

  .chatlist {
    flex: 1;
    padding: 8px 2px 8px 8px;
  }
  .chat-item {
    border-radius: 4px;
    height: 64px;

    .imore {
      display: none;
    }

    &:hover {
      background-color: #f0f0f0;
      .imore {
        display: inline-block;
      }
    }
    &.active {
      background-color: #e9e9e9;
    }

    .avatarbox {
      width: 40px;
      height: 40px;
    }
    .chatinfo {
      flex: 1;
      padding: 0 12px;
    }
    .elipisis {
      display: inline-block;
      max-width: 50%;
    }
    .chatdate {
      text-align: right;
    }
  }
  .chatbottom {
    height: 43px;
    color: #666777;
    border-top: 1px solid #e9e9e9;
    padding: 9px 0;
  }
  .cb_item {
    width: 50%;
  }
  .border-r {
    border-right: 1px solid #f0f0f0;
  }
}
.chatwindow {
  flex: 1;
  position: relative;
  border-left: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
}
.chatright {
  width: 320px;
}
</style>